The State of the Page

Here is an example of setting the state of the page using the angular-ui router. The map is bound to the latitude and longitude specified in the url hash. Click on the following link, to navigate between Portland and Crater Lake.

Using the angular-ui router, the above links are written like

<a ui-sref="main({ lat:45.52, lng:-122.68 })">Portland, Oregon</a>
<a ui-sref="main({ lat:42.95, lng:-122.1 })">Crater Lake, Oregon</a>

if you have clicked a navigation link, you can see that the back button works to take you back to the last location. Note that the url fragment does not update, if you pan or zoom the map. We’re not listening for that event and relaying it back to the state.

using mapbox.js with an angular directive

JavaScript Centered Angular Directives

In the last [example angular directive, the focus was rendering data into html elements. In that case, there was a minimum of javascript in the link function.

However, it is often useful to wrap functionality provided by a javascript library into a directive, so that the behavior can be controlled by angular.

The simplest form of angular directive is the single element replace, which follows the emerging web component pattern. Here is an example map component using mapbox.js.

In this way, the following html:

<map></map>

Can become:

By passing a latitude and longitude to the directive, the map can be centered at a specific locations.

For example, a map of Juneau, Alaska:

Is as easy as:

<map location="{ zoom:9, lat: 58.3, lng: -134.4 }"></map>

Let's make a bar chart with an angular directive and distribute it with npm.

Overview

Here is a simple barchart directive with awful css based on a blog post about d3 called Let’s Make a Bar Chart by Mike Bostock.

It is a basic excercise to demonstrate one way to distribute client side angular directives as node modules.

This blog uses npm, the node package manager to install and browserify to require the module into the local javascript.

For a more thorough treatment, please see this blog post by Kyle Young on Using npm on the client side.

The code is available on github from this repository.

For for expediency's sake, the css is distributed inside the directive's template, which is not optimal. There is no generally accepted method to bundling style with npm, but there are some options.

Portland neighborhoods by count of heritage trees

Usage

Install using npm.

        
          npm install angular-chart-components --save

Require the module in your code and list it as a dependency.

        
          var chartComponents = require('angular-chart-components');
          var module = angular.module('myApp', [
            'ChartComponents.barchart'
          ]);

Use the barchart directive in your markup with some inline data.

        
          <barchart data="[
             {value: 28, label: 'IRVINGTON'},
             {value: 16, label: 'SELLWOOD-MORELAND IMPROVEMENT LEAGUE'},
             {value: 13, label: 'NORTHWEST DISTRICT'},
             {value: 12, label: 'HILLSDALE'},
             {value: 12, label: 'GOOSE HOLLOW'},
             {value: 11, label: 'SOUTHWEST HILLS'},
             {value: 11, label: 'MT. TABOR'},
             {value: 10, label: 'LAURELHURST'},
             {value: 10, label: 'OVERLOOK'},
             {value: 10, label: 'HOSFORD-ABERNETHY'},
             {value: 9, label: 'WOODSTOCK'},
             {value: 8, label: 'RICHMOND'}
           ]"></barchart>

Use the barchart directive in your markup with some data on a controller.

        
          <barchart data="items"></barchart>
        
      
        
          $scope.items = [
            {value: 28, label: 'IRVINGTON'},
            {value: 16, label: 'SELLWOOD-MORELAND IMPROVEMENT LEAGUE'},
            {value: 13, label: 'NORTHWEST DISTRICT'},
            {value: 12, label: 'HILLSDALE'},
            {value: 12, label: 'GOOSE HOLLOW'},
            {value: 11, label: 'SOUTHWEST HILLS'},
            {value: 11, label: 'MT. TABOR'},
            {value: 10, label: 'LAURELHURST'},
            {value: 10, label: 'OVERLOOK'},
            {value: 10, label: 'HOSFORD-ABERNETHY'},
            {value: 9, label: 'WOODSTOCK'},
            {value: 8, label: 'RICHMOND'}
          ];